<template>
  <el-table
    :loading="loading"
    :data="list"
    :span-method="merge"
    border
  >
    <el-table-column label="核查要点" prop="keyName" />
    <el-table-column label="核查基准数据" prop="basicInfo" />
    <el-table-column label="核查要素" prop="element" />
    <el-table-column label="重要级别" prop="level">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.sys_dict_problem_level" :value="scope.row.itemLevel" />
      </template>
    </el-table-column>
    <el-table-column label="核查内容" prop="content" />
    <el-table-column label="核查结果">
      <template slot-scope="scope">
        <span>{{ scope.row.result == null ? '--': {'0': '否', '1': '是', '2': '不涉及'}[scope.row.result] || scope.row.result }}</span>
      </template>
    </el-table-column>
    <el-table-column label="原因" prop="reason" />
    <el-table-column label="整改措施" prop="modifiedMethod" />
    <el-table-column label="备注" prop="remark" />
    <el-table-column label="附件">
      <template slot-scope="scope">
        <span v-if="!scope.row.fileList">--</span>
        <template
          v-for="file in scope.row.fileList"
          v-else
        >
          <el-image
            v-if="file.isImage"
            :key="file.id"
            class="file-image"
            :src="file.url"
            :preview-src-list="[file.url]"
          />
          <a v-else :key="file.id" target="_blank" :href="file.url" class="file-others">{{ file.name }}</a>
        </template>

      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          v-hasPermi="['system:task:edit']"
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
        >处理</el-button>
        <el-button
          v-hasPermi="['system:task:event']"
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="setEvent(scope.row)"
        >升级事件</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { delTaskDetailItem, setEvent } from '@/api/task/task'

export default {
  name: 'IndexList',
  props: {
    loading: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  dicts: ['sys_dict_problem_level'],
  data() {
    return {
      rowSpanArr_keyName: [],
      rowSpanArr_element: [],
      rowSpanArr_basicInfo: [],
      open: false,
      form: {},
      rules: {}
    }
  },
  watch: {
    list: function(val) {
      if (val && val.length > 0) {
        this.getRowSpan('keyName')
        this.getRowSpan('element')
        this.getRowSpan('basicInfo')
      }
    }
  },
  methods: {
    getRowSpan(type) {
      this[`rowSpanArr_${type}`] = []
      let rowFlag = 0
      for (let i = 0, len = this.list.length; i < len; i++) {
        if (i === 0) {
          this[`rowSpanArr_${type}`].push(1)
        } else {
          if (this.list[i][type] && this.list[i][type] === this.list[i - 1][type]) {
            this[`rowSpanArr_${type}`][rowFlag] += 1
            this[`rowSpanArr_${type}`].push(0)
          } else {
            this[`rowSpanArr_${type}`].push(1)
            rowFlag = i
          }
        }
      }
    },
    // 合并表格行
    merge({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: this.rowSpanArr_keyName[rowIndex],
          colspan: this.rowSpanArr_keyName[rowIndex] ? 1 : 0
        }
      } else if (columnIndex === 1) {
        return {
          rowspan: this.rowSpanArr_basicInfo[rowIndex],
          colspan: this.rowSpanArr_basicInfo[rowIndex] ? 1 : 0
        }
      } else if (columnIndex === 2) {
        return {
          rowspan: this.rowSpanArr_element[rowIndex],
          colspan: this.rowSpanArr_element[rowIndex] ? 1 : 0
        }
      }
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm(`确认删除所选数据？`).then(function() {
        return delTaskDetailItem(row.id)
      }).then(() => {
        this.$emit('refresh')
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    handleUpdate(row) {
      this.$emit('update', row)
    },
    setEvent(row) {
      setEvent(row.id).then((res) => {
        this.$modal.msgSuccess('成功升级为问题，您可以在【问题列表】中查看对应记录！')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .file-image {
  width: 40px;
  height: 40px;
  padding: 0 5px;
}
.file-others {
  display: block;
  line-height: 1.2;
  &:not(:first-child) {
    margin-top: 5px;
  }
}
</style>
